<template>
  <div>
      <!-- 导航页面部份 -->
    <van-nav-bar title="购物车页面" left-text="返回" left-arrow @click-left="onClickLeft" />
  <!-- 内容区域 -->
    <div class="mainBox">
          <van-image
  round
  width="10rem"
  height="10rem"
  src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597643980721&di=6faa608d9a12bce76ac60aa85f60a298&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fdesign%2F00%2F57%2F93%2F24%2F58face867aabf.png"
/>
    </div>
    <p>购物车空空如也</p>
    <div class="btn"><van-button type="info" size="small" @click='goProductsPage'>去逛逛~~</van-button></div>
<common-footer></common-footer>
</div>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    // 返回链接
    onClickLeft () {
      this.$router.go(-1)
    },
    // 去商品详情页面
    goProductsPage () {
      this.$router.push('/goods')
    }

  }
}
</script>
<style lang="less" scoped>
/deep/ .van-nav-bar .van-icon {
  color: #fff !important;
}
/deep/.van-nav-bar__text {
  color: #fff !important;
}
/deep/.van-nav-bar__title {
  color: #fff !important;
}
.van-nav-bar {
  background-color: #1989fa;
}
// 主体内容样式
.mainBox {
    display: flex;
    justify-content: center;
}
.mainBox .van-image{
    margin: 20px 0;
}
 p {
     text-align: center;
     color: #CCCCCC;
 }
 .btn{
     display: flex;
     justify-content: center;
 }
</style>
